<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>menu</title>
		<style>
			.menuButton {
				position: relative;
				transition-property: background-color, color;
				transition-duration: 1s;
				transition-timing-function: ease-out;
				text-align: left;

				background-color: grey;

				left: 5px;
				top: 5px;
				height: 26px;

				color: white;

				border-color: black;
				font-family: sans-serif;
				font-size: 20px;
				text-decoration: none;
				box-shadow: 2px 2px 1px black;
				padding: 2px 4px;
				border: solid 1px black;
			}

			.menuButton:hover {
				position: relative;
				transition-property: background-color, color;
				transition-duration: 1s;
				transition-timing-function: ease-out;
				box-shadow: 2px 2px 1px black;

				background-color: white;
				color: black;
			}
		</style>
	</head>
	<body>
		<!-- 如果取消了过渡则不会触发 transitionend 事件，因为在过渡完成前动画的属性值改变了。 -->
		<div class="sidebar">
			<p><a class="menuButton" href="home">Home</a></p>
			<p><a class="menuButton" href="about">About</a></p>
			<p><a class="menuButton" href="contact">Contact Us</a></p>
			<p><a class="menuButton" href="links">Links</a></p>
		</div>
		<script>
			// 当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 
			// 在 WebKit 下是 webkitTransitionEnd
			// transitionend(propertyName(指示已完成过渡的属性),elapsedTime(浮点数，指示当触发这个事件时过渡已运行的时间（秒）))
			// el.addEventListener("transitionend", updateTransition, true);
		</script>
	</body>
</html>
